<template>
  <div id="app">
    <transition
        @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')"
        :name="viewTransition" :css="!!direction">
          <router-view class="router-view"></router-view>
        </transition>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: "app",
  methods: {
    
  },
  computed:{
    viewTransition() {
      if (!this.direction) return "";
      console.log("vux-pop-" + (this.direction === "forward" ? "in" : "out"))
      return "vux-pop-" + (this.direction === "forward" ? "in" : "out");
    },
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      deviceready: state => state.app.deviceready,
      demoTop: state => state.vux.demoScrollTop,
      isLoading: state => state.vux.isLoading,
      direction: state => state.vux.direction
    }),
  }
};
</script>

<style lang="less">
@import "~vux/src/styles/reset.less";

body ,html,#app{
  height: 100%;
  background-color: #fbf9fe;
}
#app{
  position: relative;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  // top: 46px;
  top:0px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
